<template>
  <div class="contents">
    <PanelTitle title="水肥配比" />

    <div class="mt infos">
      <div ref="maps" class="maps"></div>
      <table style="height: 100%;">
        <thead>
          <tr>
            <th>物料名称</th>
            <th>推荐用量</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>腐熟农家肥</td>
            <td>500 kg/亩</td>
          </tr>
          <tr>
            <td>钙镁磷肥</td>
            <td>25 kg/亩</td>
          </tr>
          <tr>
            <td>硫酸钾</td>
            <td>10kg~15kg/亩</td>
          </tr>
          <tr>
            <td>复合(混)肥(15-15-15)</td>
            <td>40 kg~50 kg/亩</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";

const maps = ref(null);
onMounted(() => {
  var myChart = echarts.init(maps.value);
  myChart.setOption({
    legend: {
      left: "left",
      icon: "rect",
      itemHeight: fitChartSize(7),
      itemWidth: fitChartSize(7),
      top: "bottom",
      left: "center",
      data: ["腐熟农家肥", "钙镁磷肥", "硫酸钾", "复合(混)肥(15-15-15)"],
      textStyle: {
        fontSize: fitChartSize(9),
        color: "#fff",
      },
    },
    tooltip: {
      show: true,
      trigger: "item",
    },
    title: {
      text: "单位：kg/亩",
      textStyle: {
        fontSize: fitChartSize(9),
        fontWeight: "bold",
        color: "#fff",
      },
      right: fitChartSize(10),
      // subtext: 'Fake Data',
      // left: 'center'
    },
    // color: ["#D4A8FC", "#00FCFF", "#1DC0DE", "#08EE8A", "#2871B5"],
    series: [
      {
        name: "外边框",
        type: "pie",
        clockWise: false,
        radius: [fitChartSize(30), fitChartSize(55)], //边框大小
        center: ["50%", "45%"], //边框位置
        silent: true,
        itemStyle: {
          normal: {
            color: "rgba(44, 215, 255, .2)",
          },
        },
        labelLine: {
          normal: {
            length: fitChartSize(45),
            length2: fitChartSize(45),
            show: false, // 隐藏所有指示线
          },
        },
        data: [
          {
            value: 0,
            // itemStyle: {
            //   normal: {
            //     borderWidth: 8, //设置边框粗细
            //     borderColor: "rgb(9,37,71, 0.5)", //边框颜色
            //   },
            // },
          },
        ],
      },
      {
        type: "pie",
        radius: [fitChartSize(35), fitChartSize(50)],
        center: ["50%", "45%"],
        itemStyle: {
          // borderRadius: 5,
        },
        labelLine: {
          length: fitChartSize(10),
          length2: fitChartSize(54),
          lineStyle: {
            color: "#2CD7FF",
          },
        },
        labelLayout: {
          width: fitChartSize(90),
          verticalAlign: "bottom",
          align: "center",
          // dy: fitChartSize(-4),
          // dx: -40,
        },
        label: {
          show: false,
          labelLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          normal: {
            show: false,
            formatter: function (e) {
              return `{a|${e.data.name}：${e.data.value}%}`;
            },
            rich: {
              a: {
                color: "#2AD0B7",
                lineHeight: fitChartSize(18),
                fontSize: fitChartSize(10),
                align: "left",
              },
            },
          },
        },
        data: [
          {
            value: 500,
            name: "腐熟农家肥",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: "rgba(26, 119, 254, 1)" },
                { offset: 1, color: "rgba(93, 202, 248, 1)" },
              ]),
            },
          },
          {
            value: 25,
            name: "钙镁磷肥",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: "rgba(8, 194, 174, 1)" },
                { offset: 1, color: "rgba(1, 208, 161, 1)" },
              ]),
            },
          },
          {
            value: 12,
            name: "硫酸钾",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: "rgba(252, 198, 64, 1)" },
                { offset: 1, color: "rgba(248, 228, 143, 1)" },
              ]),
            },
          },
          {
            value: 15,
            name: "复合(混)肥(15-15-15)",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: "rgba(180, 117, 254, 1)" },
                { offset: 1, color: "rgba(212, 168, 252, 1)" },
              ]),
            },
          },
        ],
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}

.maps {
  height: vh(200);
  width: 50%;
}
.infos {
  display: flex;
  align-content: center;
  align-items: center;
  margin: 0 vw(10);
  height: 35vh;
}

table,
td,
tr,
th {
  border: vh(1) solid #2cd7bc;
  border-collapse: collapse;
  font-size: vh(9);
}
table {
  width: 50%;
  margin: vw(6) 0;
}
th {
  color: #fff;
  background: linear-gradient(
    to bottom,
    rgba(50, 200, 167, 0.45),
    rgba(50, 200, 167, 0.05)
  );
  font-size: vh(10);
  padding: vh(6) 0;
}
td {
  color: #2cd7bc;
  text-align: center;
  font-size: vh(10);
  padding: vh(6) vw(3);
}
</style>